import React, { useState } from 'react';
import {
  Space,
  Input,
  Button,
  Select,
  Card,
  Typography,
  Row,
  Col,
  Form,
  Textarea,
} from 'tdesign-react';
import { AddIcon } from 'tdesign-icons-react';
import type { CreateTodoInput } from '../../types/todo.types';

interface TodoFormProps {
  onSubmit: (input: CreateTodoInput) => void;
  isLoading?: boolean;
}

const priorityOptions = [
  { label: 'Low', value: 'low' },
  { label: 'Medium', value: 'medium' },
  { label: 'High', value: 'high' },
];

export const TodoForm: React.FC<TodoFormProps> = ({ onSubmit, isLoading }) => {
  const [formData, setFormData] = useState<CreateTodoInput>({
    title: '',
    description: '',
    priority: 'medium',
  });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (formData.title.trim()) {
      onSubmit({
        ...formData,
        title: formData.title.trim(),
        description: formData.description?.trim() || undefined,
      });
      setFormData({ title: '', description: '', priority: 'medium' });
    }
  };

  const handleTitleChange = (value: string) => {
    setFormData((prev) => ({ ...prev, title: value }));
  };

  const handleDescriptionChange = (value: string) => {
    setFormData((prev) => ({ ...prev, description: value }));
  };

  const handlePriorityChange = (value: any) => {
    setFormData((prev) => ({ ...prev, priority: value as 'low' | 'medium' | 'high' }));
  };

  return (
    <Card style={{ marginBottom: '24px' }}>
      <Typography.Title level="h6" style={{ marginBottom: '16px' }}>
        Add New Todo
      </Typography.Title>
      <form onSubmit={handleSubmit}>
        <Space direction="vertical" size="large" style={{ width: '100%' }}>
          <Input
            placeholder="Enter todo title..."
            value={formData.title}
            onChange={handleTitleChange}
            disabled={isLoading}
            clearable
          />
          
          <Row gutter={16}>
            <Col span={12}>
              <Select
                value={formData.priority}
                onChange={handlePriorityChange}
                options={priorityOptions}
                placeholder="Select priority"
                disabled={isLoading}
                style={{ width: '100%' }}
              />
            </Col>
            <Col span={12}>
              <Button
                type="submit"
                theme="primary"
                icon={<AddIcon />}
                disabled={isLoading || !formData.title.trim()}
                block
                size="large"
                loading={isLoading}
              >
                Add Todo
              </Button>
            </Col>
          </Row>
          
          <Textarea
            placeholder="Add a description (optional)..."
            value={formData.description}
            onChange={handleDescriptionChange}
            disabled={isLoading}
            autosize={{ minRows: 2, maxRows: 4 }}
          />
        </Space>
      </form>
    </Card>
  );
};